<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
</head>

<body>
    <main class="main">
        <div class="banner">
            <div class="btn-left"></div>
            <ul id="ul-imgs" class="transition">
                <li>
                    <a href="javascript:;">
                        <img src="./image/carousel_item/carousel-1.jpg" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./image/carousel_item/carousel-2.jpg" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./image/carousel_item/carousel-3.jpg" />
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./image/carousel_item/carousel-4.jpg" />
                    </a>
                </li>
                <!-- 注意！最后li个数要比实际图片张数多1，最后一个li里的img时重复第一张li的图片 -->
                <li>
                    <a href="javascript:;">
                        <img src="./image/carousel_item/carousel-1.jpg" />
                    </a>
                </li>
            </ul>
            <ul class="ul-idxs">
                <!-- 虽然li个数比实际图片张数多1，但小圆点的个数不必多1 -->
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="btn-right"></div>
        </div>
    </main>
    <script>
        var i = 0;//现在正在显示第几张图片，从0开始
        var liwidth = 1000;//每个li的固定宽度
        var duration = 500; //每次轮播动画持续的时间
        var licount = 4;//li的总个数
        // 要移动的ul
        var ulimgs = document.getElementById("ul-imgs")
        // console.log(ulimgs)
        // 包含小圆点列表的ul
        var ulIdxs = document.querySelector(".ul-idxs")
        // 小圆点的元素列表
        var lis = ulIdxs.children;
        // 从当前位置移动到任意一个范围的位置
        function moveTo(to) {
            // 如果用户没有传入要调到第几张图，就默认调到当前图的下一张
            if (to == undefined) {
                to = i + 1;
            }
            if (i == 0) {
                if (to > i) {//如果要看到当前位置右边的图片，是不会出问题的
                    ulimgs.className = "transition";
                } else {//只有i=0在开头，且还要看左边的图片时，才会出问题
                    // 为了避免用户再次看到偷梁换柱的效果，先把transition class去掉
                    ulimgs.className = "";
                    // 将ulImgs拉倒左侧
                    ulimgs.style.marginLeft = -liwidth * licount + "px";
                    // 定时器是为了将偷梁换柱操作和加回transition属性的操作讲强行隔离开
                    setTimeout(function () {
                        moveTo(licount - 1)
                    }, 100);
                    return;
                }
            }
            i = to;//现将表示第几张图片的变量i变为目标位置
            // 再用i计算ulimgs的marginLeft距离
            ulimgs.style.marginLeft = -i * liwidth + "px";
            // 先删除所有小圆点的class
            for (var li of lis) {
                li.className = "";
            }
            console.log(lis,licount);
            
            if (i == licount) {
                i = 0;
                // 当transition动画播放播放完之后，才
                setTimeout(function () {
                    ulimgs.className = "";//清除掉transition属性
                    ulimgs.style.marginLeft = 0;//将ulIimgs拉回到0位置
                }, duration)
                // 再给当前位置的小圆点调你家class active
            }
            lis[i].className = "active";
        }
    </script>
    <script>
        var btnLeft = document.querySelector(".btn-left");
        var btnRight = document.querySelector(".btn-right");
        //用开关，控制，上次动画没有播放完，下次动画不能开始！
        var canClick = true;
        btnRight.onclick = function () {
            //调用两个按钮公共的移动方法，参数1表示移动到i+1的位置，相当于左移一个
            move(1)
        }
        //两个按钮共用的移动函数，n传入1时，移动到i+1位置，左移。n传入-1时，移动到i-1位置，右移
        function move(n) {
            if (canClick) {//只有可以单击时
                moveTo(i + n);//才调用真正移动ul的方法
                canClick = false;//马上把开关关上，禁止再次点击
                //只有本地transition动画播放完，才能自动打开开关，点击按钮才有反应。
                setTimeout(function () {
                    canClick = true;
                }, duration + 100);
            }
        }
        btnLeft.onclick = function () {
            move(-1);
        }
    </script>
</body>

</html>